<template>
  <Newpage
    v-if="types"
    :listarr="listarr"
    :sum="sum"
    @add="add"
    @seek="seek"
  ></Newpage>
  <div class="maxt" v-else>
    <div class="maxs-1">
      <cephalosome
        :themeList="themeLists"
        :themeList1="themeList1"
        @more="more"
        @topic="topic"
        @type="type"
      ></cephalosome>
    </div>
    <div class="nei-1 middle">
      <LiSt
        :arrsk="lists"
        :praise="praise"
        :people="people"
        :sequence="sequence"
        @search="search"
      ></LiSt>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Newpage from './components/Newpage.vue'
import LiSt from './components/LiSt.vue'
import cephalosome from './components/cephalosome.vue'
import {
  getThemeList,
  getAppsByLetter,
  getApps,
  getThemeAppCount
} from '@/services/Application'
import type {
  additionalProperties1,
  arrss1,
  arrss2
} from '@/services/types/Applic'
import { useRoute } from 'vue-router'
import { it } from 'element-plus/es/locales.mjs'
const themeList = ref<arrss1>([])
const themeLists = ref<arrss1>([])
const themeList1 = ref<arrss1>([])
const listarr = ref<arrss2>([])
const arrs = async () => {
  const res = await getThemeAppCount()
  listarr.value = res.data
}
interface AppData {
  [key: string]: any // 如果你了解具体的类型，可以替换 `any`
}
const list = ref<AppData>({})
type ying = {
  category?: string
  name?: string
  theme?: string
}
const obj = ref<ying>({
  category: '',
  name: '',
  theme: ''
})
const types = ref('')
const route = useRoute()
const ytpek = () => {
  types.value = route.query.type as string
}
const search = (item: any) => {
  obj.value.name = item
  arr(obj.value)
  getApps1(obj.value)
}
const arrsk = ref<string[]>([])
const lists: any = ref([])
const arr = async (poram: ying) => {
  const res = await getAppsByLetter(poram)
  list.value = res.data
  //取出对像的键值
  arrsk.value = Object.keys(list.value)?.sort()
  lists.value = arrsk.value.map((item: string) => {
    return {
      name: item,
      value: list.value[item]
    }
  })
  console.log(lists.value)
}
const getTheme = async (type: number) => {
  const res = await getThemeList(type)
  themeList.value = res.data
  themeList.value.unshift({ label: '全部', value: '' })
  themeLists.value = themeList.value.slice(0, 10)
}
const add = (item: any) => {
  if (item.type === '1') {
    obj.value.theme = item.id
    getApps1(obj.value)
  } else {
    obj.value.category = item.id
    getApps1(obj.value)
  }
}
const seek = (item: any) => {
  obj.value.name = item
  getApps1(obj.value)
}
const getTheme1 = async (type: number) => {
  const res = await getThemeList(type)
  themeList1.value = res.data
  themeList1.value.unshift({ label: '全部', value: '' })
}

const more = () => {
  themeLists.value.push(...themeList.value.slice(10, themeList.value.length))
}
const topic = (item: any) => {
  obj.value.theme = item.value
  arr(obj.value)
  getApps1(obj.value)
}
const type = (item: any) => {
  obj.value.category = item.value
  arr(obj.value)
  getApps1(obj.value)
}
const praise = ref<additionalProperties1>([])
const people = ref<additionalProperties1>([])
const sequence = ref<additionalProperties1>([])
const sum = ref<additionalProperties1>([])
const getApps1 = async (por: ying) => {
  const res = await getApps(por)
  sum.value = res.data
  praise.value = JSON.parse(JSON.stringify(sum.value))?.sort(
    (a: any, b: any) => {
      // 将 collectionNum 转换为数字进行比较
      const numA = parseInt(a.collectionNum, 10)
      const numB = parseInt(b.collectionNum, 10)

      // 对数字进行降序排序
      return numB - numA
    }
  )

  people.value = JSON.parse(JSON.stringify(sum.value))?.sort(
    (a: any, b: any) => {
      // 将 collectionNum 转换为数字进行比较
      const numA = parseInt(a.evaluationNum, 10)
      const numB = parseInt(b.evaluationNum, 10)

      // 对数字进行降序排序
      return numB - numA
    }
  )

  sequence.value = JSON.parse(JSON.stringify(sum.value))?.sort(
    (a: any, b: any) => {
      // 将 onlineTime 转换为 Date 对象
      const dateA: any = new Date(a.onlineTime)
      const dateB: any = new Date(b.onlineTime)

      // 对日期进行降序排序
      return dateB - dateA
    }
  )
}
provide('addks', {
  arr,
  getApps1
})
onMounted(async () => {
  getTheme(1)
  getTheme1(2)
  arr(obj.value)
  getApps1(obj.value)
  ytpek()
  arrs()
})
</script>

<style lang="scss" scoped>
.maxs-1 {
  padding: 10px;
  min-height: 90px;
  width: 100%;
  background: #187ac5;
  box-sizing: border-box;
}
.nei-1 {
  min-height: 600px;
  padding: 10px;
  box-sizing: border-box;
}
.maxt {
  background: #f5f5f5;
}
</style>
